<template>
  <div class="data-form">
    <el-form :model="datas" :rules="rules" ref="formSave" v-if="pl">
      <el-row class="user">
        <el-col :span="12">
          <el-form-item label="用户名" prop="username">
            <el-input placeholder="用户名" v-model="datas.username" class="input-with-select"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登录密码" prop="password">
            <el-input placeholder="用户密码" v-model="datas.password" class="input-with-select"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="真实姓名" prop="realname">
            <el-input placeholder="真实姓名" v-model="datas.realname" class="input-with-select"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="系统角色" prop="role_id">
            <el-select v-model="datas.role_id" placeholder="请选择角色">
              <el-option
                v-for="item in role"
                :key="item.role_id"
                :label="item.role_name"
                :value="item.role_id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学校" prop="unit_id">
            <el-select v-model="datas.unit_id" placeholder="请选择学校">
              <el-option
                v-for="item in school"
                :key="item.unit_id"
                :label="item.unit_name"
                :value="item.unit_id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年级" prop="grade_id">
            <el-select v-model="datas.grade_id" placeholder="请选择年级">
              <el-option
                v-for="item in grade"
                :key="item.id"
                :label="item.grade_name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="班级" prop="class_id">
            <el-select v-model="datas.class_id" placeholder="请选择班级">
              <el-option
                v-for="item in classData"
                :key="item.id"
                :label="item.class_name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户邮箱">
            <el-input placeholder="用户邮箱" v-model="datas.email" class="input-with-select"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机" prop="mobile">
            <el-input placeholder="手机" v-model="datas.mobile" class="input-with-select"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="状态" prop="status">
            <template>
              <el-radio-group v-model="datas.status">
                <el-radio :label="0">默认</el-radio>
                <el-radio :label="1">通过</el-radio>
                <el-radio :label="2">拒绝</el-radio>
              </el-radio-group>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form :model="dataForm"  ref="formBatch" v-else>
      <el-row class="user">
        <el-col :span="12">
          <el-form-item label="系统角色" prop="role_id">
            <el-select v-model="dataForm.role_id" placeholder="请选择角色">
              <el-option
                v-for="item in role"
                :key="item.role_id"
                :label="item.role_name"
                :value="item.role_id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学校" prop="unit_id">
            <el-select v-model="dataForm.unit_id" placeholder="请选择学校">
              <el-option
                v-for="item in school"
                :key="item.unit_id"
                :label="item.unit_name"
                :value="item.unit_id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年级" prop="grade_id">
            <el-select v-model="dataForm.grade_id" placeholder="请选择年级">
              <el-option
                v-for="item in grade"
                :key="item.id"
                :label="item.grade_name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="班级" prop="class_id">
            <el-select v-model="dataForm.class_id" placeholder="请选择班级">
              <el-option
                v-for="item in classData"
                :key="item.id"
                :label="item.class_name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登录密码" prop="password">
            <el-input placeholder="登录密码" v-model="dataForm.password" class="input-with-select"></el-input>
          </el-form-item>
        </el-col>
             <el-col>
            <el-form-item label="状态" prop="status">
            <template>
            <el-radio-group v-model="dataForm.status">
                <el-radio :label="1">全部启用</el-radio>
                <el-radio :label="2">全部禁用</el-radio>
            </el-radio-group>
            </template>
            </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import store from "../../store";
let access = store.state.user.accessToken,
  refresh = store.state.user.refreshToken;
export default {
  name: "User",
  props: {
    title: String,
    formData: Object,
    formBatch:Object,
    pl: {
      type: Boolean,
      default: true,
    },
    role: Array,
    grade: Array,
    classData: Array,
    school: Array,
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      header: {
        accessToken: access,
        refreshToken: refresh,
      },
      datas: this.formData,
      dataForm:this.formBatch,
      fileList1: [],
      fileList2: [],
      form: {
        name: "",
        region: "",
        category_id: null,
        path: "",
        cover: "",
      },
      rules: {
        role_id: [
          { required: true, message: "请选择用户角色", trigger: "change" },
        ],
        status: [
          { required: true, message: "请选择用户状态", trigger: "change" },
        ],
        username: [
          { required: true, message: "请填写用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请填写密码", trigger: "blur" }],
        realname: [
          { required: true, message: "请填写真实姓名", trigger: "blur" },
        ],
        mobile: [
          {
            validator: (rule, value, callBack) => {
              if (!value) {
                callBack("请输入手机号码");
              } else if (/^[1][0-9]{10}$/.test(value)) {
                callBack();
              } else {
                callBack("请输入正确的手机号码");
              }
            },
          },
        ],
        // email: [
        //   {
        //     required: true,
        //     type: "email",
        //     message: "请填写正确邮箱",
        //     trigger: "blur",
        //   },
        // ],
      },
      dialogFormVisible: false,
    };
  },
  watch: {
    formData: {
      immediate: true,
      handler(val) {
        this.datas = val;
      },
    },
     formBatch: {
      immediate: true,
      handler(val) {
        this.dataForm= val;
      },
    },
  },
  mounted(){
console.log(this.formBatch)
  },
  methods: {
    validataForm() {
      if(this.title == "批量编辑"){
        this.$emit("saveEditor")
      }else{
this.$refs["formSave"].validate((valid) => {
        if (valid) {
          if (this.title == "添加用户") {
            this.$emit("saveData");
          } else if(this.title == "编辑用户") {
            this.$emit("saveDataEditor");
          }
        } else {
          return false;
        }
      });
      }
      
    },
  },
};
</script>
<style lang="scss">
.el-form-item__label {
  padding: 0;
  line-height: 30px;
}
label {
  float: none !important;
}
.user .el-col {
  width: 46%;
  margin: 0 2%;
}
</style>
<style  scoped>
.label-title {
  padding-bottom: 10px;
}
.choose {
  background-color: #5cb85c;
}
.el-select {
  width: 100%;
}
.text {
  height: 100px;
}
</style>
